<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- ECharts单文件引入 -->
    <script src="../js/echarts2.x-all.js"></script>
    <title>力导向布局</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:600px"></div>

<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title : {
            text: '内部对外的人流走向分布',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                magicType: {show: true, type: ['force', 'chord']},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                type:'force',
                name : "人流走向分布",
                ribbonType: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1.2,
                draggable: false,
                linkSymbol: 'arrow',
                steps: 10,
                coolDown: 0.9,
                //preventOverlap: true,
                nodes:[
                    {
                        category:0, name: '沙依巴克区', value : 10,
                        symbolSize: [60, 35],
                        draggable: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'right',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        }
                    },
                    {category:1, name: '达坂城区1',value : 0},
                    {category:1, name: '达坂城区2',value : 0},
                    {category:1, name: '米东区',value : 4},
                    {category:1, name: '水磨沟区',value : 20},
                    {category:1, name: '天山区',value : 29},
                    {category:1, name: '头屯河区',value : 3},
                    {category:1, name: '乌鲁木齐县1',value : 0},
                    {category:1, name: '乌鲁木齐县2',value : 5},
                    {category:1, name: '新市区',value : 36}
                ],
                links : [
                    {source : '沙依巴克区', target : '达坂城区1', weight : 72},
                    {source : '沙依巴克区', target : '达坂城区2', weight : 246},
                    {source : '沙依巴克区', target : '米东区', weight : 3985},
                    {source : '沙依巴克区', target : '水磨沟区', weight : 17002},
                    {source : '沙依巴克区', target : '天山区', weight : 24675},
                    {source : '沙依巴克区', target : '头屯河区', weight : 2903},
                    {source : '沙依巴克区', target : '乌鲁木齐县1', weight : 319},
                    {source : '沙依巴克区', target : '乌鲁木齐县2', weight : 4207},
                    {source : '沙依巴克区', target : '新市区', weight : 30515}
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>